<template>
  <div
    v-show="Audioplaysong"
    class="appAudioBox"
    v-if="!$route.meta.BoFanghidden"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
  >
    <!-- <div  style="text-align: center;width: 100%">暂无音乐正在播放，快添加歌曲吧！</div> -->

    <div
      class="zhezhao songList"
      v-if="listShow"
      @click="listShow = false"
    ></div>

    <transition name="slide">
      <div class="songList lb" v-show="listShow">
        <BFlist
          v-for="songitm of songlist"
          :key="songitm.id"
          :item="songitm"
          @Playlistmuc="$emit('Playlistmuc', $event)"
          @delsong="$emit('delsong', $event)"
          :playing="playing"
          :AudioplaysongId="AudioplaysongId"
        >
        </BFlist>
      </div>
    </transition>

    <div
      v-show="Audioplaysong"
      class="appAudioBox_xinxi"
      @click="gotoXiangqing"
    >
      <img
        v-if="Audioplaysong?.al?.picUrl || Audioplaysong?.picUrl"
        :src="Audioplaysong?.al?.picUrl || Audioplaysong?.picUrl"
        alt=""
        class="anima"
        :class="{ playing: playing }"
      />

      <img v-else src="../assets/DiePianZhanWei.png" alt="" class="anima" />

      <h3 class="songtitle">{{ Audioplaysong?.name }}</h3>

      <div class="Btnbox">
        <!-- <button @click.stop="$emit('Previoussong')">上一首</button> -->
        <span
          class="iconfont icon-zanting"
          v-show="btnShow"
          @click.stop="$emit('pauessong')"
          style="font-size: 35px"
        ></span>

        <span
          class="iconfont icon-bofang"
          v-show="!btnShow"
          @click.stop="$emit('playsong')"
          style="font-size: 35px"
        ></span>
        <!-- <button @click.stop="nextsong">下一首</button> -->

        <span
          class="iconfont icon-yinlebofangliebiao"
          @click.stop="SongListShow"
          style="font-size: 30px"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import BFlist from "./BFlist.vue";

export default {
  components: {
    BFlist,
  },
  props: {
    btnShow: Boolean,
    Audioplaysong: Object,
    songlist: Array,
    playing: Boolean,
    AudioplaysongId: Number,
  },
  data() {
    return {
      listShow: false,
      startX: 0, // 初始触摸位置
      moveX: 0, // 结束触摸位置
    };
  },
  methods: {
    nextsong() {
      console.log(this.Audioplaysong);
      this.$emit("nextsong");
    },
    gotoXiangqing() {
      this.listShow = false;
      this.$router.push({
        path: "/bofangqi",
        query: {
          id: this.Audioplaysong.id,
        },
      });
    },
    SongListShow() {
      this.listShow = !this.listShow;
      console.log(this.songlist);
    },

    handleTouchStart(event) {
      // 记录初始触摸位置
      this.startX = event.touches[0].clientX;
    },
    handleTouchEnd(event) {
      // 记录结束触摸位置
      this.moveX = event.changedTouches[0].clientX;
      // 计算滑动方向
      const diff = this.startX - this.moveX;
      if (diff > 50) {
        // 向右滑
        this.handleSwipeRight();
      } else if (diff < -50) {
        // 向左滑
        this.handleSwipeLeft();
      }
    },
    handleSwipeRight() {
      console.log("Swiped Right");
      this.$emit("nextsong");
      // 执行向右滑的事件
    },
    handleSwipeLeft() {
      console.log("Swiped Left");
      this.$emit("Previoussong");
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter, .slide-leave-to /* .slide-leave-active in <2.1.8 */ {
  transform: translateY(100%);
}

.songtitle {
  // background-color: red;
  width: 43vw;
  text-align: center;
  overflow: hidden; /* 隐藏溢出的内容 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
}

.Btnbox {
  width: 20vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.anima {
  animation: rotate 6s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  border-radius: 20px;
  box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.5);
  z-index: -1;

  width: 40px;
  height: 40px;
}

.playing {
  animation-play-state: running;
}

.appAudioBox {
  display: flex;
  align-items: center;

  width: 100vw;
  height: 60px;
  background-color: aliceblue;
  // position: relative;
  background-color: rgba(109, 109, 109, 0.2);
  /* 半透明背景 */
  backdrop-filter: blur(10px);
  /* 背景模糊 */
  -webkit-backdrop-filter: blur(10px);

  // z-index: 400;
  /* 兼容老版本Safari */
  .songList {
    position: absolute;
    top: -30vh;
    left: 0;

    width: 100vw;
    height: 37vh;
    background-color: rgb(245, 245, 245);

    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .lb {
    background-color: rgba(253, 253, 253, 0.9);
    /* 半透明背景 */
    backdrop-filter: blur(10px);
    /* 背景模糊 */
    -webkit-backdrop-filter: blur(10px);
    /* 兼容老版本Safari */
    border-radius: 10px 10px 0 0;
    padding: 10px 0;

    border-top: 2px solid rgb(71, 71, 71);
  }

  .zhezhao {
    height: 90vh;
    top: -100vh;
    background-color: rgba(0, 0, 0, .6);

    z-index: -1;
  }

  .appAudioBox_xinxi {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  img {
    height: 40px;
  }
}
</style>